<template>
  <div>
    <!-- 列表 -->
    <ul class="TemplateStyle">
      <!-- 出库日期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">出库日期</span>
        </div>
        <div class="label">
          <input type="text" :value="userDate" :disabled="true" />
        </div>
      </li>
      <!-- 出库物资(名称) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/birth.png" />
          <span class="li_txt">出库物资(名称)</span>
        </div>
        <div class="label">
          <input type="text" v-model="outName" />
        </div>
      </li>
      <!-- 出库物资(单位) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/order.png" />
          <span class="li_txt">出库物资(单位)</span>
        </div>
        <div class="label">
          <input type="text" v-model="outUnit" />
        </div>
      </li>
      <!-- 出库物资(数量) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">出库物资(数量)</span>
        </div>
        <div class="label">
          <input type="number" v-model="outNum" />
        </div>
      </li>
      <!-- 物资单价(元) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/money.png" />
          <span class="li_txt">物资单价(元)</span>
        </div>
        <div class="label">
          <input type="number" v-model="outPrice" />
        </div>
      </li>
      <!-- 保质期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/term.png" />
          <span class="li_txt">保质期</span>
        </div>
        <div class="label">
          <input type="text" v-model="effectPeriod" />
        </div>
      </li>
      <!-- 购货方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/donation.png" />
          <span class="li_txt">购货方</span>
        </div>
        <div class="label">
          <input type="text" v-model="buyer" placeholder="请输入购货方" />
        </div>
      </li>
      <!-- 承运方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/transport.png" />
          <span class="li_txt">承运方</span>
        </div>
        <div class="label">
          <input type="text" v-model="shipper" placeholder="请输入承运方" />
        </div>
      </li>
      <!-- 快递单号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/symbol.png" />
          <span class="li_txt">快递单号</span>
        </div>
        <div class="label">
          <input type="number" v-model="shipId" placeholder="请输入快递单号" />
        </div>
      </li>
      <!-- 确认按钮 -->
      <button class="btn" @click="btnSale">确定</button>
    </ul>
    <!-- loading -->
    <div style="padding-bottom: 4rem; position:top:50%">
      <van-loading
        v-show="loading"
        style="position: absolute;top: 50%;left: 46%;"
        type="spinner"
        color="#1989fa"
      ></van-loading>
    </div>
  </div>
</template>
<script>
import moment from "moment";

export default {
  name: "SalesOutlet",
  data() {
    return {
      userDate: "", // 展示给用户
      outTime: "",
      outName: "",
      outUnit: "",
      outNum: "",
      outPrice: "",
      effectPeriod: "",
      buyer: "",
      shipper: "",
      shipId: "",
      loading: false // loading
    };
  },
  created() {
    // 自动生成日期
    let nowDate = new Date();
    this.outTime = moment(nowDate).format("YYYY-MM-DD HH:mm:ss");
    this.userDate = moment(nowDate).format("YYYY-MM-DD");
  },
  methods: {
    btnSale() {
      this.loading = true; // loading显示
      let params = {
        token: JSON.parse(localStorage.getItem("login")).res.token,
        userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
        outTime: this.outTime,
        outName: this.outName,
        outUnit: this.outUnit,
        outNum: this.outNum,
        outPrice: this.outPrice,
        effectPeriod: this.effectPeriod,
        buyer: this.buyer,
        shipper: this.shipper,
        shipId: this.shipId
      };
      this.$api
        .requestProduceProductOut(params)
        .then(res => {
          this.loading = false; // loading隐藏
          this.$dialog.alert({
            message: res
          });
        })
        .catch(err => {
          this.loading = false; // loading隐藏
          this.$dialog.alert({
            message: err
          });
        });
    }
  }
};
</script>
<style>
@import "../../assets/css/TemplateStyle.css";
</style>
